<template>
  <div class="cs-page-container">
    <el-card class="box-card">
      <div class="cs-filter-container" style="margin-bottom: 20px">
<!--        <el-select-->
<!--          v-model="listQuery.appType"-->
<!--          clearable-->
<!--          placeholder="请选择APP类型"-->
<!--        >-->
<!--          <el-option label="花伴交友" :value="0" />-->
<!--          <el-option label="花伴约会" :value="1" />-->
<!--          <el-option label="千千" :value="2" />-->
<!--        </el-select>-->
<!--        <el-button-->
<!--          type="primary"-->
<!--          size="small"-->
<!--          icon="el-icon-search"-->
<!--          @click="handleFilter"-->
<!--        >搜索</el-button>-->
        <el-button
          class="filter-item"
          type="primary"
          @click="handleCreate"
        >新增弹窗</el-button>
      </div>
      <el-table
        :key="tableKey"
        v-loading="listLoading"
        :data="list"
        border
        fit
        highlight-current-row
        style="width: 100%;"
      >
        <el-table-column
          label="公告ID"
          align="center"
        >
          <template slot-scope="scope">
            <span>{{ scope.row.id }}</span>
          </template>
        </el-table-column>
        <el-table-column
          label="创建时间"
          align="center"
        >
          <template slot-scope="scope">
            <span>{{ scope.row.createTime | parseTime }}</span>
          </template>
        </el-table-column>
        <el-table-column
          label="公告标题"
          align="center"
        >
          <template slot-scope="scope">
            <span>{{ scope.row.title }}</span>
          </template>
        </el-table-column>
        <el-table-column
          label="图片"
          align="center"
        >
          <template slot-scope="scope">
            <image-tooltip :image-id="scope.row.cover">
              <img
                slot="img"
                style="width:100px;"
                :src="scope.row.cover"
                @click="showImage(scope.row.cover)"
              >
            </image-tooltip>
          </template>
        </el-table-column>
        <el-table-column
          label="链接"
          align="center"
        >
          <template slot-scope="scope">
            <a :href="scope.row.url">{{ scope.row.url }}</a>
          </template>
        </el-table-column>
<!--        <el-table-column-->
<!--          label="APP"-->
<!--          align="center"-->
<!--        >-->
<!--          <template slot-scope="scope">-->
<!--            <span>{{ scope.row.appType | filterAppType }}</span>-->
<!--          </template>-->
<!--        </el-table-column>-->
        <el-table-column
          label="开关状态"
          width="150px"
          align="center"
        >
          <template slot-scope="scope">
            <el-button
              :type="scope.row.open ? 'primary' : 'danger'"
              size="mini"
            >{{ scope.row.open ? '已打开' : '已关闭' }}</el-button>
          </template>
        </el-table-column>
        <el-table-column
          label="操作"
          align="center"
          width="330"
          class-name="small-padding fixed-width"
        >
          <template slot-scope="{row}">
            <el-button
              type="primary"
              size="mini"
              @click="handleUpdate(row)"
            >修改</el-button>
            <el-button
              type="danger"
              size="mini"
              @click="handleDelete(row)"
            >删除</el-button>
          </template>
        </el-table-column>
      </el-table>

    </el-card>
    <el-dialog
      :title="textMap[dialogStatus]"
      :visible.sync="dialogFormVisible"
      width="800px"
      :destroy-on-close="true"
    >
      <el-form
        ref="dataForm"
        :rules="rules"
        :model="temp"
        label-position="left"
        label-width="100px"
        style="margin-left:50px;"
      >
        <el-form-item
          label="公告标题:"
          prop="title"
        >
          <el-input v-model.trim="temp.title" maxlength="60" />
        </el-form-item>
        <el-form-item
          label="链接:"
          prop="url"
        >
          <el-input v-model.trim="temp.url" maxlength="800" />
        </el-form-item>
<!--        <el-form-item-->
<!--          label="APP"-->
<!--          prop="open"-->
<!--        >-->
<!--          <el-select v-model="temp.appType" placeholder="请选择APP">-->
<!--            <el-option label="花伴" :value="0"></el-option>-->
<!--            <el-option label="花伴约会" :value="1"></el-option>-->
<!--            <el-option label="千千" :value="2"></el-option>-->
<!--          </el-select>-->
<!--        </el-form-item>-->
        <el-form-item
          label="上传图片(345:120/345:64):"
          prop="cover"
        >
          <Upload
            :img="temp.cover"
            :is-size="true"
            @change="imageChange"
          />
        </el-form-item>
        <el-form-item
          label="开关"
          prop="open"
        >
          <el-switch v-model="temp.open" />
        </el-form-item>
      </el-form>
      <div
        slot="footer"
        class="dialog-footer"
      >
        <el-button @click="dialogFormVisible = false">取消</el-button>
        <el-button
          type="primary"
          @click="createData"
        >确认</el-button>
      </div>
    </el-dialog>
    <ImageViewer
      :visible.sync="imageViewerVisible"
      :url="imageUrl"
    />
  </div>
</template>

<script>
  import {
    getMineNoticeList,
    updateMineNoticeList,
    deleteMineNoticeList
  } from '@/api/customSetting'
  import Upload from '@/components/Upload/SingleImage'
  import ImageViewer from '@/components/ImageViewer'

  export default {
    name: 'NoticeSetting',
    components: { Upload, ImageViewer },
    data() {
      return {
        imageViewerVisible: false,
        imageUrl: '',
        tableKey: 0,
        list: null,
        listLoading: false,
        listQuery: {
          appType: null
        },
        alertNotice: {
          url: null,
          title: null,
          id: undefined,
          open: false,
          cover: null,
          type: 1
        },
        temp: {
          appType: 0,
          url: null,
          title: null,
          id: undefined,
          open: false,
          cover: null,
          type: 0
        },
        dialogFormVisible: false,
        dialogStatus: '',
        textMap: {
          update: '编辑',
          create: '新建'
        },
        dialogPvVisible: false,
        total: 0,
        rules: {
          appType: [{ required: true, message: '必选项', trigger: 'blur' }],
          title: [{ required: true, message: '必选项', trigger: 'blur' }],
          cover: [{ required: true, message: '必选项', trigger: 'blur' }],
          url: [{ required: true, message: '必选项', trigger: 'blur' }],
          open: [{ required: true, message: '必选项', trigger: 'blur' }]
        }
      }
    },
    created() {
      this.doSearch()
    },
    methods: {
      doSearch() {
        getMineNoticeList(this.listQuery).then(response => {
          this.list = response.data.list
          this.total = total
        })
      },
      showImage(url) {
        this.imageViewerVisible = true
        this.imageUrl = url
      },
      imageChange(fileList, type) {
        if (type === 'upload') {
          const size = fileList[0].size
          const rate = size[0] / size[1]
          const { appType } = this.temp
          this.temp = Object.assign(this.temp, { cover: fileList[0].url })
          // if (rate === 345 / 120 && appType === 0) {
          //   this.temp = Object.assign(this.temp, { cover: fileList[0].url })
          // } else if (rate === 345 / 64 && appType === 1) {
          //   this.temp = Object.assign(this.temp, { cover: fileList[0].url })
          // } else if (rate === 345 / 120 && appType === 2) {
          //   this.temp = Object.assign(this.temp, { cover: fileList[0].url })
          // } else {
          //   this.temp = Object.assign(this.temp, { cover: '' })
          //   this.$message({
          //     message: '图片的比例不正确',
          //     type: 'fail'
          //   })
          // }
        } else if (type === 'remove') {
          this.temp = Object.assign(this.temp, { cover: null })
        }
      },
      resetTemp() {
        this.temp = {
          type: 0,
          url: null,
          title: null,
          id: undefined,
          cover: null
        }
      },
      handleCreate() {
        this.resetTemp()
        this.dialogStatus = 'create'
        this.dialogFormVisible = true
        this.$nextTick(() => {
          this.$refs['dataForm'].clearValidate()
        })
      },
      handleAlertNotice() {
        this.$refs['dataForm2'].validate(valid => {
          valid &&
          updateMineNoticeList(this.alertNotice).then(() => {
            this.doSearch()
            this.$notify({
              title: '成功',
              message: '操作成功',
              type: 'success',
              duration: 2000
            })
          })
        })
      },
      createData() {
        this.$refs['dataForm'].validate(valid => {
          valid &&
          updateMineNoticeList(this.temp).then(() => {
            this.doSearch()
            this.dialogFormVisible = false
            this.$notify({
              title: '成功',
              message: '操作成功',
              type: 'success',
              duration: 2000
            })
          })
        })
      },
      handleUpdate(row) {
        this.temp = Object.assign({}, row)
        this.dialogStatus = 'update'
        this.dialogFormVisible = true
        this.$nextTick(() => {
          this.$refs['dataForm'].clearValidate()
        })
      },
      handleDelete(row) {
        this.$confirm(`是否删除此内容?`, '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        })
          .then(() => {
            deleteMineNoticeList({ noticeId: row.id }).then(res => {
              this.$message({
                message: '删除成功',
                type: 'success'
              })
              const index = this.list.indexOf(row)
              this.list.splice(index, 1)
              this.doSearch()
            })
          })
          .catch(() => {
            this.$message({
              type: 'info',
              message: '已取消'
            })
          })
      }
    }
  }
</script>
<style lang="scss" scoped>
  .img-wrap {
    width: 100px;
    height: 100px;
    cursor: pointer;
    img {
      width: 100%;
      height: 100%;
      object-fit: contain;
    }
  }
</style>
